<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div v-if="showError" class="contentDiv">
            <base-alert type="danger">
                {{errorMsg}}
            </base-alert>
        </div>
        <div v-if="showInfo" class="contentDiv">
            <base-alert class="col-md-6" type="dark">
                {{infoMsg}}
            </base-alert>
        </div>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <card type="secondary" shadow
                        header-classes="bg-white pb-5"
                        body-classes="px-lg-5 py-lg-5"
                        class="border-0">
                        <div class="row justify-content-center">
                            <div class="col-md-4 contentDiv"><strong>uid</strong></div>
                            <div class="col-md-4 contentDiv"><strong>姓名</strong></div>
                            <div class="col-md-4 contentDiv"><strong>邮箱</strong></div>
                        </div>
                        <div class="row justify-content-center" v-for="(result,index) in results" :key="index">
                            <div class="col-md-12">
                            <b-list-group>
                                <b-list-group-item button @click="open(result.uid)">
                                    <div class="row">
                                        <div class="col-md-4 contentDiv">
                                            <h6>{{result.uid}}</h6>
                                        </div>
                                        <div class="col-md-4 contentDiv">
                                            <h6>{{result.name}}</h6>
                                        </div>
                                        <div class="col-md-4 contentDiv">
                                            <h6>{{result.email}}</h6>
                                        </div>
                                    </div>
                                    
                                </b-list-group-item>
                            </b-list-group>
                            </div>
                        </div>
                        
                    </card>
                </div>
            </div>
            <br/>
        </div>
    </section>
</template>
<script>
    import HouseInList from "./components/HouseInList.vue";
    import {getAllUsers} from "../api";
    export default {
        data() {
            return{
                results: [],
                showError: false,
                showInfo: false,
                errorMsg: '',
                infoMsg: ''
            }
        },
        methods: {
            open (uid) {
                this.$router.push({name:"profile",params: {'uid': uid}})
            },
            getAll(){
                getAllUsers().then(users =>{
                    this.results = users.data;
                    console.log(this.results);
                })
            }
        },
        watch: {
            "$route": "getHouseList"
        },
        created(){
            this.getAll();
        },
        components: {
            
        }
    };
</script>
<style>
.contentDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: auto;
}
</style>
